<template>
  <div class="mt-address">
    <slider :class="{'spread': show}"
    class="mt-address-selector" 
    :index="index" 
    :height="360">
      <slider-item>
        <ul class="item1">
        </ul>
      </slider-item>
      <slider-item>
        123123123123123123123123123123123
      </slider-item>
    </slider>
    <button @click="changeIndex(0)">切到0</button>
    <button @click="changeIndex(1)">切到1</button>
    <back-mask :active="show" @onClick="handleMaskClick"></back-mask>
  </div>
</template>

<script>
import { Slider, SliderItem } from "@/components/Slider"
import  BackMask from "@/components/Mask"
 
export default {
  data() {
    return {
      transitionName: "silde-right",
      index: 0,
      display: false,
    }
  },
  props: {
    show: {
      default: false
    }
  },
  mounted() {
    var a = document.querySelector(".item1")
    var lis = ""
    for (let i = 0; i < 100; i++) {
      lis += `<li>${i}</li>`
    }
    a.innerHTML = lis
  },
  methods: {
    changeIndex(index) {
      this.index = index
    },
    handleMaskClick() {
      this.$emit('update:show', false)
    }
  },
  watch: {
    show(v, ov) {
      this.display = v
    }
  },
  components: { Slider, SliderItem, BackMask }
}
</script>

<style lang="scss">
@import "../../styles/index.scss";

.mt-address {
  .mt-address-selector {
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    transform: translate3d(0, 100%, 0);
    transition: transform .3s;
  }
  
  .spread {
    transform: translate(0);

  }
}

</style>
